<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>房屋租赁管理系统</title>
    <link rel="stylesheet" type="text/css" href="/static/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/static/upload/css/jquery.upload.css">
    <script type="text/javascript" src="/static/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/static/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/upload/js/jquery.upload.js"></script>
    <script type="text/javascript" src="/static/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/static/common.js?version=0.2"></script>
    <style>
    </style>
</head>
<body>


<div id="list" style="width:97%;height:250px"></div>

<div id="toolbar" class="ToolbarArea">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="openAdd()">添加</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="openEdit()">编辑</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="del()">删除</a>
<%--    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="search()">搜索</a>--%>
</div>

<div id="dlgSave" class="easyui-dialog dlg-save" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
    <form id="fmSave" method="post" novalidate style="margin:0;padding:20px 50px">
        <input type="hidden" id="id" name="id">
        <table cellpadding="5">
            <tr>
                <td colspan="1">标题:</td>
                <td colspan="3">
                    <input name="title" class="easyui-textbox" style="width:100%">
                </td>
                <td colspan="1">备注:</td>
                <td colspan="3">
                    <input name="remark" class="easyui-textbox" style="width:100%">
                </td>
            </tr>

            <tr>
                <td>状态:</td>
                <td>
                    <input class="easyui-combobox" name="status" required="true" style="width:100%" data-options="
                        valueField: 'value',
                        textField: 'text',
                        url: '/dict/findByCode/status'"
                    />
                </td>
                <td>类型:</td>
                <td>
                    <input class="easyui-combobox" name="position" required="true" style="width:100%" data-options="
                        valueField: 'value',
                        textField: 'text',
                        url: '/dict/findByCode/position'"
                    />
                </td>
                <td>使用面积:</td>
                <td>
                    <input name="area" class="easyui-textbox" required="true" style="width:100%">
                </td>
                <td>朝向:</td>
                <td>
                    <input class="easyui-combobox" name="orientation" required="true" style="width:100%" data-options="
                        valueField: 'value',
                        textField: 'text',
                        url: '/dict/findByCode/orientation'"
                    />
                </td>
            </tr>

            <tr>
                <td>户型:</td>
                <td>
                    <input class="easyui-combobox" name="type" required="true" style="width:100%" data-options="
                        valueField: 'value',
                        textField: 'text',
                        url: '/dict/findByCode/houseType'"
                    />
                </td>
                <td>电梯:</td>
                <td>
                    <input class="easyui-combobox" name="elevator" required="true" style="width:100%" data-options="
                        valueField: 'value',
                        textField: 'text',
                        url: '/dict/findByCode/yesOrNo'"
                    />
                </td>
                <td>楼层:</td>
                <td>
                    <input name="floor" class="easyui-textbox" required="true" style="width:100%">
                </td>
                <td>最高楼层:</td>
                <td>
                    <input name="floorMax" class="easyui-textbox" required="true" style="width:100%">
                </td>
            </tr>

            <tr>
                <td>房屋年代:</td>
                <td>
                    <input name="years" class="easyui-textbox" label="" style="width:100%">
                </td>
                <td>业主姓名:</td>
                <td>
                    <input name="ownerName" class="easyui-textbox" style="width:100%">
                </td>
                <td>业主电话:</td>
                <td>
                    <input name="ownerMobile" class="easyui-textbox" style="width:100%">
                </td>

            </tr>

            <tr>
                <td colspan="1">亮点:</td>
                <td colspan="3">
                    <input class="easyui-combobox" name="tag" style="width: 100%;height: 50px;" data-options="
                        multiple:true,
                        multiline:true,
                        valueField: 'value',
                        textField: 'text',
                        url: '/dict/findByCode/tag'"
                    />
                </td>
                <td colspan="1">配套设备:</td>
                <td colspan="3">
                    <input class="easyui-combobox" name="device" style="width: 100%;height: 50px;" data-options="
                        multiple:true,
                        multiline:true,
                        valueField: 'value',
                        textField: 'text',
                        url: '/dict/findByCode/device'"
                    />
                </td>
            </tr>

            <tr>
                <td colspan="1">区域:</td>
                <td colspan="3">
                    <input class="easyui-combobox" name="region" required="true" style="width:100%" data-options="
                        valueField: 'value',
                        textField: 'text',
                        url: '/dict/findByCode/region'"
                    />
                </td>

                <td colspan="1">地址:</td>
                <td colspan="3">
                    <input name="address" class="easyui-textbox" required="true" style="width:100%">
                </td>

            </tr>

            <tr>
                <td colspan="1">图片:</td>
                <td colspan="9">
                    <div class="upload"></div>

                    <input type="hidden" name="imageStr" id="imageStr" value="">
                </td>

            </tr>


        </table>
    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="save()" style="width:90px">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlgSave').dialog('close')" style="width:90px">取消</a>
</div>
<%--<table class="easyui-datagrid" title="Basic DataGrid" style="width:97%;height:250px" data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">--%>
<%--    <thead>--%>
<%--    <tr>--%>
<%--        <th data-options="field:'id',width:80">编号</th>--%>
<%--        <th data-options="field:'title',width:100">标题</th>--%>
<%--        <th data-options="field:'listprice',width:80,align:'right'">List Price</th>--%>
<%--        <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>--%>
<%--        <th data-options="field:'attr1',width:250">Attribute</th>--%>
<%--        <th data-options="field:'status',width:60,align:'center'">Status</th>--%>
<%--        <th data-options="field:'status',width:60,align:'left'">操作</th>--%>
<%--    </tr>--%>
<%--    </thead>--%>
<%--</table>--%>
<script type="text/javascript">

    $("#list").datagrid({
        url:'/house/manage/list',
        title: '房屋列表',
        fit: true,
        fitColumns: false, // 设置列固定宽度，true值表示自动填满整个横向空间
        toolbar: "#toolbar", // 工具栏id
        idField: 'id',
        frozenColumns: [[{
            field: 'ck',
            checkbox: true
        }]],
        columns: [[
            {field: 'id', title: '编号', width: 180, sortable: false, align: 'left'},
            {field: 'title', title: '标题', width: 180, sortable: false, align: 'left'},
            {field: 'createTime', title: '创建时间', width: 180, sortable: false, align: 'left'},
            {field: 'status', title: '状态', width: 50, sortable: false, align: 'left', formatter: function(val) {return getDictText('status', val);}},
            {field: 'position', title: '类型', width: 80, sortable: false, align: 'left', formatter: function(val) {return getDictText('position', val);}},
            {field: 'area', title: '使用面积', width: 80, sortable: false, align: 'left'},
            {field: 'orientation', title: '朝向', width: 80, sortable: false, align: 'left', formatter: function(val) {return getDictText('orientation', val);}},
            {field: 'type', title: '户型', width: 80, sortable: false, align: 'left', formatter: function(val) {return getDictText('houseType', val);}},
            {field: 'floor', title: '楼层', width: 80, sortable: false, align: 'left'},
            {field: 'floorMax', title: '最高楼层', width: 80, sortable: false, align: 'left'},
            {field: 'elevator', title: '电梯', width: 80, sortable: false, align: 'left', formatter: function(val) {return getDictText('yesOrNo', val);}},
            {field: 'years', title: '房屋年代', width: 80, sortable: false, align: 'left'},
            {field: 'ownerName', title: '业主姓名', width: 100, sortable: false, align: 'left'},
            {field: 'ownerMobile', title: '业主电话', width: 100, sortable: false, align: 'left'}
            // {field: '', title: '操作', width: 100, sortable: false, align: 'left'}
        ]],
        onSelect: function (rowIndex, rowData) {
            console.log(rowData)
            // console.info('rationPackageDatagrid onSelect');
            // // 确保没有任何缓存痕迹（必不可少）
            // // 要点提示：在点击选中新的一行时，使其只勾选当前行，故先清除所有历史勾选项，让勾选项与选中项同步。
            // $(this).datagrid("clearChecked");
            // $(this).datagrid("checkRow", rowIndex);
        }
    });

    function openAdd() {
        initImageUpload();
        $('#dlgSave').dialog('open').dialog('center').dialog('setTitle','添加');
        $('#fmSave').form('clear');
    }

    function save() {
        $('#fmSave').form('submit',{
            url: "/house/manage/saveOrUpdate",
            onSubmit: function() {
                let data = $(this).parseForm();
                $("#imageStr").val(data.uploadImage)

                return $(this).form('validate');
            },
            success: function(result) {
                var res = $.parseJSON(result);
                console.log(res);
                if (res.success){
                    $('#dlgSave').dialog('close');
                    $('#list').datagrid('reload');
                } else {
                    top.$.messager.show({
                        title: 'Error',
                        msg: res.msg
                    });
                }
            }
        });
    }

    function openEdit() {
        var row = $('#list').datagrid('getChecked');

        if(row.length === 0 || row.length > 1) {
            top.$.messager.show({
                title: 'Error',
                msg: '请选择一条数据'
            });

            return;
        }



        if (row){
            console.log("编辑", row[0]);
            $('#dlgSave').dialog('open').dialog('center').dialog('setTitle','编辑');
            if(row[0].tag === undefined || row[0].tag === null) {
                row[0].tag = '';
            }

            if(row[0].device === undefined || row[0].device === null) {
                row[0].device = '';
            }

            $('#fmSave').form('load', row[0]);
            $('#fmSave').val(row[0].id);
            initImageUpload(row[0].imgs)
        }
    }


    function del() {
        var row = $('#list').datagrid('getChecked');

        let ids = new Array();
        $.each(row, function(index, value) {
            ids.push(value.id);
        });

        console.log(ids);

        if (row){
            $.ajax({
                url: "/house/manage/delete",
                type: "POST",
                data: JSON.stringify(ids),
                contentType: "application/json",
                dataType: "json",
                success: function(result) {
                    console.log(result);
                    if (result.success){
                        $('#dlgSave').dialog('close');
                        $('#list').datagrid('reload');
                    } else {
                        top.$.messager.show({
                            title: 'Error',
                            msg: result.msg
                        });
                    }
                }
            });
        }
    }


    function initImageUpload(imgs) {

        $(".upload").html('');

        let imageUrl = [];
        if(imgs !== undefined || imgs !== '') {
            $(imgs).each(function(index, img){
                imageUrl.push('/preview/img/' + img);
            })
        }

        console.log('imageUrl', imageUrl);

        $(".upload").ajaxImageUpload({
            fileInput: 'uploadImage', //上传按钮名，即input[type=file]的id name值
            postUrl: '/upload/singleImageUpload', //上传的服务器地址
            imageUrl: imageUrl,
            width: 100, // 图片宽度
            height: 100, // 图片高度
            before : function(b) {

            },
            success : function(json){
                console.log('图片上传成功回调函数:' + JSON.stringify(json));
            },
            complete : function () {
                console.log('图片全部上传成功回调函数');
            },
            delete : function (src) {
                console.log('图片删除时回调函数，要删除的文件路径：' + src);
            },
            error : function (e) {
                console.log('图片上传失败回调函数:' + JSON.stringify(e));
            }
        });
    }

</script>
</body>
</html>